<template>
  <div id="login">
    <div class="loginForm" :style="{ height:$store.state.sizes.loginHeight,width:$store.state.sizes.loginWidth,
    'margin-top': $store.state.sizes.loginTop,'margin-left':$store.state.sizes.loginLeft}">
      <el-form ref="login" class="login-form" :model="user" :rules="rules" hide-required-asterisk label-width="30px">
        <div class="login-title">
           后台管理模版
        </div>
        <br><br>
        <el-form-item prop="userId">
          <el-input v-model="user.userId" placeholder="用户名">
            <el-button slot="prepend" icon="el-icon-user" />
          </el-input>
        </el-form-item>
        <el-form-item prop="key">
          <el-input v-model="user.key" type="password" placeholder="密码">
            <el-button slot="prepend" icon="el-icon-key" />
          </el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="loginSubmit">登录</el-button>
          <el-button style="float: right;" class="login-btn" type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog ref="dialog" title="您的密码为初始密码,请修改后再登录"
      :visible.sync="updateFlag" width="30%" top="15vh" :close-on-click-modal="false">
      <el-form ref="update" :model="user" :rules="rules" label-width="120px">
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="user.newKey"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="rePassword">
          <el-input type="password" v-model="user.reKey" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFlag = false"> 取消 </el-button>
        <el-button type="primary" @click="update"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import {
    Component,
    Prop,
    Vue
  } from 'vue-property-decorator'
  import md5 from 'js-md5'
  import {
    password
  } from '@/static/tool/validate.js';

  @Component
  export default class Login extends Vue {
    marginTop = (window.innerHeight - 350) * 0.4 + 'px';
    urls = {
      login: "um/sso/login",
      update: "um/update/password"
    }
    updateFlag = false;
    user = {
      userId: null,
      key: null
    };

    rules = {
      userId: [{
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
      }],
      key: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }],
      newKey: [{
        validator: password,
        trigger: 'blur'
      }],
      reKey: [{
        validator: this.reKey,
        trigger: 'blur'
      }]
    };

    loginSubmit() {
      const that = this as any;
      that.$refs.login.validate((valid) => {
        if (valid) {
          const param = JSON.parse(JSON.stringify(that.user))
          param.key = md5(param.key)
          that.$post(that.urls.login, param).then(function(response) {
            if (response == true) {
              setTimeout(() => {
                that.$emit("init");
              }, 300)
            } else if (response) {
              that.updateFlag = true;
            }
          })
        } else {
          return false
        }
      })
    }

    reset() {
      this.user = {
        userId: null,
        key: null
      }
    }

    update() {
      const that = this;
      this.$refs['update'].validate((valid) => {
        if (valid) {
          var param = JSON.parse(JSON.stringify(that.user));
          param.key = md5(param.key);
          param.newKey = md5(param.newKey);
          that.$post(that.urls.update, param).then(function(response) {
            if (response) {
              that.user.key = that.user.newKey;
              that.updateFlag = false;
            }
          });
        } else {
          return false;
        }
      });
    }

    init(b) {
      this.$store.commit('updateState', {
        prop: 'showHeader',
        value: b
      })
      this.$store.commit('initSizes')
    }

    reKey(rule, value, callback) {
      if (!value) {
        callback(new Error('请重复输入新密码'));
      } else if (value != this.user.newKey) {
        callback(new Error('两次输入的新密码不一致'));
      } else {
        callback();
      }
    }

    created() {
      this.init(false);
      const that = this;
      document.onkeydown = function(e) {
        let key = e.which;
        if (key == 13) {
          that.loginSubmit();
        }
      };
    }
  }
</script>

<style scoped>
  #login {
    background-color: #edf2f7;
    align-items: center;
  }

  .loginForm {
    background: none;
    height: 350px;
    width: 500px;
    box-shadow: 0 0 25px #cac6c6 !important;
    padding: 30px 30px 20px 0px;
  }

  .login-title {
    margin: 0px 70px 20px;
    font-size: 1.8rem;
    text-align: center;
    color: #2d3748;
  }

  .login-btn {
    margin: 0px 30px;
    width: 100px;
  }
</style>
